import React, { memo } from 'react'
import { Button, Grid, Space, Swiper, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      className="content"
      style={{ background: color }}
      onClick={() => {
        Toast.show(`你点击了卡片 ${index + 1}`)
      }}
    >
      {index + 1}
    </div>
  </Swiper.Item>
))
const Home = memo(() => {
  const navigate = useNavigate()
  return (
    <div>
      <Swiper>{items}</Swiper>
      <Grid style={{ marginTop: '20px' }} columns={2} gap={10}>
        <Grid.Item>
          <div
            onClick={() => navigate('/eat?index=0')}
            style={{
              height: '2rem',
              backgroundColor: 'rgb(255,100,100)',
              fontSize: '25px',
              textAlign: 'center',
              color: '#fff'
            }}
          >
            到店自取
          </div>
        </Grid.Item>
        <Grid.Item>
          <div
            onClick={() => navigate('/eat?index=1')}
            style={{
              height: '2rem',
              backgroundColor: 'rgb(255,100,100)',
              fontSize: '25px',
              textAlign: 'center',
              color: '#fff'
            }}
          >
            外卖配送
          </div>
        </Grid.Item>
      </Grid>
    </div>
  )
})

export default Home
